<!-- 点单页面-出售组件 -->
<template>
	<view class="sell">
		<u-row>
			<u-col>
				<view class="sell-body">
					<u-row>
						<u-col span="9" offset="0.5">
							<view class="sell-address">
								<view class="text-composing">
									<span class="address-name">珠海南方IT总店</span>
									<u-icon name="map-fill" size="40rpx"></u-icon>
									<span class="address-distance">距离100km</span>
								</view>
								<view class="text-composing">
									<view class="text-type">
										<u--text color="#d81e06" text="自助点餐" size="26rpx" bold prefixIcon="../../static/icon/selfOrderingMachine/meishi.png"></u--text>
									</view>
									<span class="address-particulars">珠海市斗门区白蕉镇南方it学校</span>
								</view>
								
							</view>
						</u-col>
						<u-col span="2">
							<view class="sell-address">
								<u-icon name="../../static/icon/mine/songkaquan.png" size="70rpx" label="卡券包" labelPos="bottom" labelSize="23rpx" labelColor="#502314" space="0"></u-icon>
							</view>
						</u-col>
					</u-row>
					<u-divider></u-divider>
					<u-row align="top">
						<u-col span="2">
							<view class="sidebar">
								<view class="foodType-view foodType-select">
									<u-icon label="人气推荐" size="40" name="../../static/icon/selfOrderingMachine/renqi.png" labelPos="bottom" labelSize="25rpx" labelColor="#A28778"></u-icon>
								</view>
								<view class="foodType-view">
									<u-icon label="超值套餐" size="40" name="../../static/icon/selfOrderingMachine/renqi.png" labelPos="bottom" labelSize="25rpx" labelColor="#A28778"></u-icon>
								</view>		
							</view>
						</u-col>
						<u-col span="10">
							<view class="foodList">
								<view class="foodList-food" v-for="(food,index) in foodLists" :key="food.id">
									<u-row>
										<u-col span="5">
											<view class="flex-center food-img">
												<u--image :src="food.src" width="220rpx" height="220rpx"></u--image>
											</view>
										</u-col>
										<u-col span="7">
											<view class="food-informaction">
												<view class="food-name">
													<u--text :text="food.name" bold color="#502314" size="35rpx"></u--text>
												</view>
												<view class="food-price">
													<span>￥</span><span class="price">{{ food.price }}</span>
													<view class="price-tag">
														<u-tag text="选规格" bgColor="#FF8732" border-color="#FF8732" shape="circle"></u-tag>
													</view>
												</view>
											</view>
										</u-col>
									</u-row>
								</view>
								
							</view>
						</u-col>
					</u-row>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name:"sell",
		data() {
			return {
				foodLists:[{
					id:1,
					src:'../../static/foodimgs/taocan.png',
					name:"麦辣鸡腿堡套餐",
					price:20.0
				},{
					id:2,
					src:'../../static/foodimgs/hanbao-img.PNG',
					name:"双层牛肉堡",
					price:25.5
				},{
					id:3,
					src:'../../static/foodimgs/taocan.png',
					name:"麦辣鸡腿堡套餐",
					price:20.0
				},{
					id:4,
					src:'../../static/foodimgs/hanbao-img.PNG',
					name:"双层牛肉堡",
					price:25.5
				},{
					id:5,
					src:'../../static/foodimgs/taocan.png',
					name:"麦辣鸡腿堡套餐",
					price:20.0
				},{
					id:6,
					src:'../../static/foodimgs/hanbao-img.PNG',
					name:"双层牛肉堡",
					price:25.5
				}]
			};
		}
	}
</script>

<style lang="scss">
	//整体框架
	.sell{
		
		
		//出售框体
		.sell-body{
			position: relative;
			bottom: 50rpx;
			border-radius: 50rpx 50rpx 0 0;
			background-color: white;
			
			
			
			.sell-address{
				position: relative;
				top: 10rpx;
			}
			//地址文字排版
			.text-composing{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				
				//地址名称
				.address-name{
					font-weight: bold;
					font-size: 38rpx;
					color: #502314;
					
				}
				
				//距离信息
				.address-distance{
					margin-left: 10rpx;
					font-size: 25rpx;
					line-height: 50rpx;
					font-weight: bold;
					color: #a79189;
				}
				
				//点餐类型
				.text-type{
					width: 140rpx;
				}
				
				//地址详情
				.address-particulars{
					color: #a79189;
					font-size: 25rpx;
					margin-left: 10rpx;
					line-height: 35rpx;
				}
				
			}
			
			//左侧边导航栏框体
			.sidebar{
				background-color: #F5EDBC;
				
				//单个类型列表
				.foodType-view{
					height: 180rpx;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				
				//被选择的列表
				.foodType-select{
					background-color: white;
				}
				
			}
			
			//右侧食品展示列表
			.foodList{
				
				
				//单个菜品展示框体
				.foodList-food{
					height: 250rpx;
					width: 95%;
					position: relative;
					left: 2.5%;
					border-radius: 0 0 20rpx 20rpx;
					border-bottom: 1rpx #cccccc solid;
					
					//菜品图片
					.food-img{
						height: 250rpx;
					}
					
					//菜品展示右侧信息
					.food-informaction{
						height: 250rpx;
						
						//菜品名称
						.food-name{
							position: relative;
							top: 10rpx;
						}
						
						//价格行
						.food-price{
							color: #502314;
							position: relative;
							top: 120rpx;
							display: flex;
							align-items: center;
							font-weight: bold;
							
							//价格
							.price{
								font-size: 55rpx;
								font-family: "Verdana";
							}
							
							.price-tag{
								width: 125rpx;
								position: absolute;
								right: 10rpx;
							}
						}
					}
					
				}
				
			}
		}
		
		//设置居中
		.flex-center{
			display: flex;
			justify-content: center;
			align-items: center; 
		}
	}
</style>